<template>
  <div>
    <el-drawer
      :title="props.title"
      v-model="showDrawer"
      @close="closeDeawer(businessFormRef)"
      size="500px"
      append-to-body
      class="business-drawer"
    >
      <el-alert v-if="businessForm.isSetRenew" class="alert-primary" :closable="false" show-icon>
        <template #title>
          <div class="alert-primary-title">
            <div>已调整续约后的返点比例</div>
            <el-button type="primary" link @click="openIsUpBusinessDrawer"> 点击查看 </el-button>
          </div>
        </template>
      </el-alert>
      <div class="spase" v-loading="businessForm.isLoading">
        <el-scrollbar max-height="calc(100vh - 90px)">
          <el-form
            style="width: 100%"
            ref="businessFormRef"
            label-position="top"
            :model="businessForm"
            :rules="businessRules"
            label-width="80px"
          >
            <template v-if="props.title == '单独设置商家返点'">
              <el-form-item label="商家名称" prop="businessId">
                <el-select
                  v-model="businessForm.businessId"
                  filterable
                  :disabled="businessForm.darwerType == '编辑'"
                  placeholder="请选择商家名称"
                  @change="businessChange"
                >
                  <el-option
                    v-for="item in businessForm.businessOptions"
                    :key="item.businessId"
                    :label="item.businessName"
                    :value="item.businessId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="工厂名称" prop="factoryId">
                <el-select
                  v-model="businessForm.factoryId"
                  filterable
                  :disabled="businessForm.darwerType == '编辑' || !businessForm.businessId"
                  placeholder="请选择工厂名称"
                  @change="factoryChange"
                >
                  <el-option
                    v-for="item in businessForm.factoryOptions"
                    :key="item.factoryId"
                    :label="item.factoryName"
                    :value="item.factoryId"
                  />
                </el-select>
              </el-form-item>
            </template>
            <template v-if="props.title == '设置商家返佣' || props.title == '更新商家返佣'">
              <el-form-item v-if="!businessForm.businessLevelId" label="商家名称">
                <div>{{ businessForm.businessName }}</div>
              </el-form-item>
              <el-form-item label="工厂名称">
                <div>{{ businessForm.factoryName }}</div>
              </el-form-item>
              <el-form-item v-if="businessForm.businessLevelId" label="商家等级">
                <div>{{ businessForm.businessLevelName }}</div>
              </el-form-item>
            </template>
            <!-- 续约前返佣比例/返佣比例 -->
            <el-form-item :label="businessForm.hasRenew || props.title == '更新商家返佣' ? '续约前集采返点' : '集采返点'">
              <div style="width: 100%; border: 1px solid #e9e9eb">
                <el-table :data="businessForm.businessFormTable" highlight-current-row style="width: 100%">
                  <el-table-column property="amount" label="销售金额（W）" width="120"></el-table-column>
                  <el-table-column
                    v-if="businessForm.businessLevelId"
                    property="factoryCommissionRatio"
                    label="厂家返点（%）"
                    width="120"
                  ></el-table-column>
                  <el-table-column v-else property="factoryRatio" label="厂家返点（%）" width="120"></el-table-column>
                  <el-table-column label="对应商家返点（%）">
                    <template #default="scope">
                      <el-input-number
                        v-if="props.title == '设置商家返佣'"
                        class="hidden-controls"
                        v-model="scope.row.businessLevelCommissionRatio"
                        :precision="2"
                        :step="0.1"
                        :min="0"
                        :max="scope.row.factoryCommissionRatio"
                        :disabled="!isEdit"
                      />
                      <el-input-number
                        v-else-if="props.title == '单独设置商家返点'"
                        class="hidden-controls"
                        v-model="scope.row.commissionRatio"
                        :precision="2"
                        :step="0.1"
                        :min="0"
                        :max="scope.row.factoryRatio"
                        :disabled="!isEdit"
                      />
                      <div v-else>{{ scope.row.businessRatio }}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form-item>
            <!-- <el-form-item label="备注说明">
                <el-input
                  v-model="businessForm.remarks"
                  type="textarea"
                  placeholder="请输入"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  style="width: 100%"
                  autosize
                  clearable
                  :disabled="!isEdit"
                />
              </el-form-item> -->
            <!-- 更新商家返佣 -->
            <template v-if="businessForm.hasRenew">
              <el-form-item label="续约后集采返点">
                <div style="width: 100%; border: 1px solid #e9e9eb">
                  <el-table :data="businessForm.businessAfterFormTable" highlight-current-row style="width: 100%">
                    <el-table-column property="amount" label="销售金额（W）" width="120"></el-table-column>
                    <el-table-column
                      v-if="businessForm.businessLevelId"
                      property="factoryCommissionRatio"
                      label="厂家返点（%）"
                      width="120"
                    ></el-table-column>
                    <el-table-column v-else property="factoryRatio" label="厂家返点（%）" width="120"></el-table-column>
                    <el-table-column label="对应商家返点（%）">
                      <template #default="scope">
                        <el-input-number
                          v-if="businessForm.businessLevelId"
                          class="hidden-controls"
                          v-model="scope.row.businessLevelCommissionRatio"
                          :precision="2"
                          :step="0.1"
                          :min="0"
                          :max="scope.row.factoryCommissionRatio"
                          :disabled="!isEdit"
                        />
                        <el-input-number
                          v-else
                          class="hidden-controls"
                          v-model="scope.row.commissionRatio"
                          :precision="2"
                          :step="0.1"
                          :min="0"
                          :max="scope.row.factoryRatio"
                          :disabled="!isEdit"
                        />
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-form-item>
            </template>
          </el-form>
        </el-scrollbar>
      </div>

      <template #footer>
        <div style="text-align: center">
          <template v-if="isEdit">
            <el-button class="btn" @click="closeDeawer(businessFormRef)">取 消</el-button>
            <el-button class="btn" :loading="businessForm.buttonLoading" type="primary" @click="handelSubmit(businessFormRef)"
              >确 定</el-button
            >
          </template>
          <template v-if="!isEdit">
            <el-button class="btn" @click="closeDeawer(businessFormRef)">取消</el-button>
            <el-button class="btn" type="primary" @click="handelEdit">编辑</el-button>
          </template>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script setup name="businessDrawer">
import { toReactive } from "@vueuse/core";
import { before } from "lodash";
import { onMounted, toRef } from "vue";

const props = defineProps({
  renewalDrawer: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ""
  },
  isEdit: {
    type: Boolean,
    default: false
  },
  isStop: {
    type: Boolean,
    default: true
  },
  businessFormData: {
    type: Object,
    default: {},
    deep: true
  }
});

const showDrawer = ref(props.renewalDrawer);
// 是否编辑
const isEdit = toRef(props.isEdit);
const emits = defineEmits([
  "renewalDrawerChang",
  "closeDeawerEmits",
  "businessInfoSubmit",
  "businessChangeDrawer",
  "factoryChangeDrawer",
  "openreRenewalDrawer"
]);

// watch(
//   () => props.renewalDrawer,
//   newValue => {
//     showDrawer.value = newValue;
//   }
// );

// watch(
//   () => showDrawer.value,
//   newValue => {
//     emits("renewalDrawerChang", newValue);
//   }
// );

watch(
  () => props.businessFormData,
  (newValue, oldValue) => {
    businessForm.value = newValue;
  }
);

// 商家表单
const businessForm = toRef(props.businessFormData);

const businessFormRef = ref();

// 商家表单校验
const businessRules = {
  businessId: [{ required: true, message: "商家名称不能为空", trigger: "change" }],
  factoryId: [{ required: true, message: "工厂名称不能为空", trigger: "change" }]
};

// 商家变换
const businessChange = value => {
  emits("businessChangeDrawer", value);
};

// 工厂变换
const factoryChange = value => {
  emits("factoryChangeDrawer", value);
};

// 提交商家表单
const handelSubmit = formRef => {
  if (!formRef) return;
  formRef.validate((valid, fields) => {
    if (valid) {
      emits("businessInfoSubmit", businessForm.value);
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 关闭抽屉
const closeDeawer = formRef => {
  showDrawer.value = false;
  formRef.resetFields();
  businessForm.value.businessFormTable = [];
  isEdit.value = false;
  emits("closeDeawerEmits", false);
};

// 编辑修改表单
const handelEdit = () => {
  isEdit.value = true;
};

// 更新商家返佣
const openIsUpBusinessDrawer = () => {
  emits("openreRenewalDrawer");
};
</script>
<style lang="scss" scoped>
.btn {
  width: 120px;
  height: 36px;
  line-height: 36px;
}
</style>
<style lang="scss">
.business-drawer {
  .el-drawer__header {
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #dcdfe6;
  }
  .el-drawer__body {
    padding: 0;
    .alert-primary {
      background-color: #e3f0fe;
      color: #000;
      .el-alert__icon {
        color: #0052d9;
      }
      .el-alert__content {
        width: 100%;
      }
      &-title {
        display: flex;
        justify-content: space-between;
      }
    }
    .spase {
      padding: 20px;
      .hidden-controls .el-input-number__decrease,
      .hidden-controls .el-input-number__increase {
        display: none; /* 隐藏增加和减少按钮 */
      }
      .hidden-controls .el-input__wrapper {
        padding: 0 10px;
      }
    }
  }
}
</style>
